<template>
    <div ref="mapContainerRef" class="map-container"></div>
</template>
<script setup>
    import { ref, onMounted, onUnmounted } from "vue";
    import AMapLoader from "@amap/amap-jsapi-loader";

    window._AMapSecurityConfig = {
        securityJsCode: "0d52bb189eab31f8629f79e725773c55",
    };

    const mapContainerRef = ref(null);
    const map = ref(null);
    const amapKey = "64acd8cafde6e28cdf710bb088f35e85";

    const initMap = async () => {
        AMapLoader.load({
            key: amapKey, //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                map.value = new AMap.Map(mapContainerRef.value, {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [104.06,30.55], // 初始化地图中心点位置
                });
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
    };

    onMounted(() => {
        initMap();
        // AMapLoader.load({
        //     key: "64acd8cafde6e28cdf710bb088f35e85", // 申请好的Web端开发者Key，首次调用 load 时必填
        //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        //     plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        // })
        //     .then((AMap) => {
        //         console.log(AMap);
        //         // const layer = new AMap.createDefaultLayer({
        //         //     zooms: [3, 20], //可见级别
        //         //     visible: true, //是否可见
        //         //     opacity: 1, //透明度
        //         //     zIndex: 0, //叠加层级
        //         // });
        //         map = new AMap.Map("container", {
        //             // // 设置地图容器id
        //             // viewMode: "2D", // 是否为3D地图模式
        //             // zoom: 11, // 初始化地图级别
        //             // center: [116.397428, 39.90923], // 初始化地图中心点位置
        //             // // mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
        //             // layers: [layer], //layer为创建的默认图层
        //         });
        //         // const traffic = new AMap.TileLayer.Traffic({
        //         //     autoRefresh: true, //是否自动刷新，默认为false
        //         //     interval: 180, //刷新间隔，默认180s
        //         // });
        //         // map.add(traffic); //通过add方法添加图层
        //         // traffic.show(); //显示路况图层
        //         // traffic.hide(); //隐藏路况图层
        //     })
        //     .catch((e) => {
        //         console.log(e);
        //     });
    });

    onUnmounted(() => {
        // map?.destroy();
    });
</script>

<style scoped>
    .map-container {
        width: 100%;
        height: 100%;
    }
</style>
